<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 星露谷攻略论坛</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f9fafb;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 4rem;
            padding: 0 1rem;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
        }

        .navbar-logo {
            height: 2rem;
            width: auto;
        }

        .navbar-title {
            margin-left: 0.5rem;
            font-size: 1.25rem;
            font-weight: bold;
            color: #059669;
        }

        .navbar-nav {
            display: none;
        }

        .nav-link {
            color: #6b7280;
            text-decoration: none;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-bottom: 2px solid transparent;
        }

        .nav-link:hover {
            color: #374151;
            border-bottom-color: #d1d5db;
        }

        .nav-link.active {
            color: #111827;
            border-bottom-color: #059669;
        }

        .login-btn {
            background-color: #059669;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
        }

        .login-btn:hover {
            background-color: #047857;
        }

        /* 主要内容区域 */
        .main-content {
            padding: 2rem 0;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        /* 个人信息卡片 */
        .profile-card {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .profile-content {
            padding: 1.5rem;
        }

        .profile-header {
            display: flex;
            align-items: center;
        }

        .profile-avatar {
            width: 5rem;
            height: 5rem;
            border-radius: 9999px;
        }

        .profile-info {
            margin-left: 1rem;
        }

        .profile-name {
            font-size: 1.25rem;
            font-weight: bold;
            color: #111827;
            margin: 0;
        }

        .profile-date {
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }

        .profile-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e5e7eb;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }

        .profile-actions {
            margin-top: 1rem;
        }

        .btn-primary {
            width: 100%;
            background-color: #059669;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background-color: #047857;
        }

        .btn-secondary {
            width: 100%;
            background-color: white;
            color: #059669;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: 1px solid #059669;
            cursor: pointer;
            margin-top: 0.5rem;
        }

        .btn-secondary:hover {
            background-color: #f0fdf4;
        }

        /* 个人设置 */
        .settings-card {
            margin-top: 2rem;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .settings-content {
            padding: 1.5rem;
        }

        .settings-title {
            font-size: 1.125rem;
            font-weight: 500;
            color: #111827;
            margin-bottom: 1rem;
        }

        .settings-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .settings-link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #6b7280;
            text-decoration: none;
            font-size: 0.875rem;
        }

        .settings-link:hover {
            color: #111827;
        }

        /* 内容导航 */
        .content-nav {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            margin-bottom: 2rem;
        }

        .nav-tabs {
            display: flex;
            border-bottom: 1px solid #e5e7eb;
        }

        .nav-tab {
            padding: 1rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: #6b7280;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            white-space: nowrap;
        }

        .nav-tab:hover {
            color: #374151;
            border-bottom-color: #d1d5db;
        }

        .nav-tab.active {
            color: #059669;
            border-bottom-color: #059669;
        }

        /* 发布列表 */
        .post-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .post-card {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .post-content {
            padding: 1.5rem;
        }

        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .post-meta {
            display: flex;
            align-items: center;
        }

        .post-tag {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.625rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .tag-guide {
            background-color: #dcfce7;
            color: #166534;
        }

        .tag-discussion {
            background-color: #dbeafe;
            color: #1e40af;
        }

        .post-date {
            margin-left: 0.5rem;
            font-size: 0.875rem;
            color: #6b7280;
        }

        .post-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .post-stat {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .post-title {
            margin-top: 0.5rem;
            font-size: 1.125rem;
            font-weight: 500;
            color: #111827;
            text-decoration: none;
        }

        .post-excerpt {
            margin-top: 0.5rem;
            font-size: 0.875rem;
            color: #6b7280;
        }

        .post-actions {
            margin-top: 1rem;
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        .post-action {
            font-size: 0.875rem;
            color: #6b7280;
            text-decoration: none;
            cursor: pointer;
        }

        .post-action:hover {
            color: #374151;
        }

        .post-action.delete {
            color: #ef4444;
        }

        .post-action.delete:hover {
            color: #dc2626;
        }

        /* 分页 */
        .pagination {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }

        .pagination-list {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .pagination-item {
            margin: 0 -1px;
        }

        .pagination-link {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border: 1px solid #d1d5db;
            background-color: white;
            color: #6b7280;
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
        }

        .pagination-link:hover {
            background-color: #f9fafb;
        }

        .pagination-link.active {
            background-color: #ecfdf5;
            color: #059669;
        }

        /* 模态框 */
        .modal {
            position: fixed;
            inset: 0;
            background-color: rgba(107, 114, 128, 0.75);
            display: none;
            z-index: 50;
            overflow-y: auto;
            padding: 1rem;
        }

        .modal-content {
            position: relative;
            background-color: white;
            border-radius: 0.75rem;
            margin: 2rem auto;
            max-width: 32rem;
            width: 100%;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(0);
            transition: transform 0.3s ease-out;
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            padding: 0.5rem;
            cursor: pointer;
            color: #6b7280;
            transition: color 0.2s;
        }

        .modal-close:hover {
            color: #111827;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            padding: 1.5rem;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.625rem 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            color: #111827;
            transition: all 0.2s;
        }

        .form-input:focus {
            outline: none;
            border-color: #059669;
            box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
        }

        .form-input.error {
            border-color: #dc2626;
        }

        .form-error {
            color: #dc2626;
            font-size: 0.75rem;
            margin-top: 0.375rem;
            display: none;
        }

        .form-error.show {
            display: block;
        }

        .btn {
            padding: 0.625rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-primary {
            background-color: #059669;
            color: white;
            border: none;
        }

        .btn-primary:hover {
            background-color: #047857;
        }

        .btn-secondary {
            background-color: white;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .btn-secondary:hover {
            background-color: #f9fafb;
        }

        /* 动画效果 */
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal.show {
            display: block;
            animation: modalFadeIn 0.3s ease-out;
        }

        /* 响应式设计 */
        @media (min-width: 640px) {
            .navbar-nav {
                display: flex;
                gap: 2rem;
            }
        }

        @media (min-width: 1024px) {
            .content-grid {
                grid-template-columns: 1fr 2fr;
            }
        }

        /* 页脚样式 */
        .footer {
            background-color: white;
            margin-top: 3rem;
            padding: 3rem 0;
        }

        .footer-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.25rem;
        }

        .footer-link {
            color: #6b7280;
            text-decoration: none;
            font-size: 1rem;
            padding: 0.5rem;
        }

        .footer-link:hover {
            color: #374151;
        }

        .footer-copyright {
            margin-top: 2rem;
            text-align: center;
            color: #9ca3af;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container navbar-content">
            <div class="navbar-brand">
                <img class="navbar-logo"
                    src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?w=500&auto=format&fit=crop&q=60"
                    alt="星露谷论坛">
                <span class="navbar-title">星露谷论坛</span>
            </div>
            <div class="navbar-nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="guides.html" class="nav-link">攻略中心</a>
                <a href="community.html" class="nav-link">社区讨论</a>
                <a href="wiki.html" class="nav-link">资料库</a>
            </div>
            <button class="login-btn">登录/注册</button>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container main-content">
        <div class="content-grid">
            <!-- 左侧个人信息 -->
            <div>
                <!-- 个人信息卡片 -->
                <div class="profile-card">
                    <div class="profile-content">
                        <div class="profile-header">
                            <img class="profile-avatar"
                                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&auto=format&fit=crop&q=60"
                                alt="用户头像">
                            <div class="profile-info">
                                <h2 class="profile-name">农场主小明</h2>
                                <p class="profile-date">加入时间：2024-01-01</p>
                            </div>
                        </div>
                        <div class="profile-stats">
                            <div class="stat-item">
                                <p class="stat-value">128</p>
                                <p class="stat-label">发帖</p>
                            </div>
                            <div class="stat-item">
                                <p class="stat-value">256</p>
                                <p class="stat-label">收藏</p>
                            </div>
                            <div class="stat-item">
                                <p class="stat-value">512</p>
                                <p class="stat-label">获赞</p>
                            </div>
                        </div>
                        <div class="profile-actions">
                            <button class="btn-primary">编辑资料</button>
                            <button id="changePasswordBtn" class="btn-secondary">修改密码</button>
                        </div>
                    </div>
                </div>

                <!-- 个人设置 -->
                <!-- <div class="settings-card">
                    <div class="settings-content">
                        <h3 class="settings-title">个人设置</h3>
                        <div class="settings-list">
                            <a href="#" class="settings-link">
                                <span>账号安全</span>
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                            <a href="#" class="settings-link">
                                <span>消息通知</span>
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                            <a href="#" class="settings-link">
                                <span>隐私设置</span>
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div> -->
            </div>

            <!-- 右侧内容区 -->
            <div>
                <!-- 内容导航 -->
                <div class="content-nav">
                    <div class="nav-tabs">
                        <a href="#" class="nav-tab active">我的发布</a>
                        <a href="#" class="nav-tab">我的收藏</a>
                        <a href="#" class="nav-tab">我的评论</a>
                        <a href="#" class="nav-tab">我的点赞</a>
                    </div>
                </div>

                <!-- 发布列表 -->
                <div class="post-list">
                    <!-- 发布项目 1 -->
                    <div class="post-card">
                        <div class="post-content">
                            <div class="post-header">
                                <div class="post-meta">
                                    <span class="post-tag tag-guide">攻略</span>
                                    <span class="post-date">2024-03-20</span>
                                </div>
                                <div class="post-stats">
                                    <span class="post-stat">128 浏览</span>
                                    <span class="post-stat">32 评论</span>
                                    <span class="post-stat">16 点赞</span>
                                </div>
                            </div>
                            <a href="#" class="post-title">新手入门：第一年春季完美攻略</a>
                            <p class="post-excerpt">从零开始，教你如何在春季获得最大收益，为后续发展打下坚实基础...</p>
                            <div class="post-actions">
                                <button class="post-action">编辑</button>
                                <button class="post-action delete">删除</button>
                            </div>
                        </div>
                    </div>

                    <!-- 发布项目 2 -->
                    <div class="post-card">
                        <div class="post-content">
                            <div class="post-header">
                                <div class="post-meta">
                                    <span class="post-tag tag-discussion">讨论</span>
                                    <span class="post-date">2024-03-19</span>
                                </div>
                                <div class="post-stats">
                                    <span class="post-stat">256 浏览</span>
                                    <span class="post-stat">48 评论</span>
                                    <span class="post-stat">24 点赞</span>
                                </div>
                            </div>
                            <a href="#" class="post-title">分享：我的自动化农场设计</a>
                            <p class="post-excerpt">经过三个月的努力，终于完成了全自动化农场的设计，分享给大家参考...</p>
                            <div class="post-actions">
                                <button class="post-action">编辑</button>
                                <button class="post-action delete">删除</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <ul class="pagination-list">
                        <li class="pagination-item">
                            <a href="#" class="pagination-link">
                                <span>上一页</span>
                            </a>
                        </li>
                        <li class="pagination-item">
                            <a href="#" class="pagination-link">1</a>
                        </li>
                        <li class="pagination-item">
                            <a href="#" class="pagination-link active">2</a>
                        </li>
                        <li class="pagination-item">
                            <a href="#" class="pagination-link">3</a>
                        </li>
                        <li class="pagination-item">
                            <a href="#" class="pagination-link">
                                <span>下一页</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <nav class="footer-nav">
                <a href="#" class="footer-link">关于我们</a>
                <a href="#" class="footer-link">使用条款</a>
                <a href="#" class="footer-link">隐私政策</a>
                <a href="#" class="footer-link">联系我们</a>
            </nav>
            <p class="footer-copyright">&copy; 2024 星露谷攻略论坛. All rights reserved.</p>
        </div>
    </footer>

    <!-- 修改密码模态框 -->
    <div id="changePasswordModal" class="modal" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">修改密码</h3>
                <button type="button" class="modal-close" aria-label="关闭">
                    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <form id="passwordForm">
                    <div class="form-group">
                        <label class="form-label">当前密码</label>
                        <input type="password" class="form-input" placeholder="请输入当前密码" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-input" placeholder="请输入新密码" required>
                        <div class="form-error">密码长度至少8位，包含字母和数字</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">确认新密码</label>
                        <input type="password" class="form-input" placeholder="请再次输入新密码" required>
                        <div class="form-error">两次输入的密码不一致</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button type="submit" form="passwordForm" class="btn btn-primary">确认修改</button>
            </div>
        </div>
    </div>
</body>

<script>
    // 获取DOM元素
    const changePasswordBtn = document.getElementById('changePasswordBtn');
    const changePasswordModal = document.getElementById('changePasswordModal');
    const passwordForm = document.getElementById('passwordForm');
    const modalClose = document.querySelector('.modal-close');
    const inputs = passwordForm.querySelectorAll('input[type="password"]');
    const errorDivs = passwordForm.querySelectorAll('.form-error');

    // 显示修改密码模态框
    changePasswordBtn.addEventListener('click', () => {
        changePasswordModal.classList.add('show');
        document.body.style.overflow = 'hidden';
    });

    // 关闭模态框
    function closeModal() {
        changePasswordModal.classList.remove('show');
        document.body.style.overflow = '';
        passwordForm.reset();
        inputs.forEach(input => input.classList.remove('error'));
        errorDivs.forEach(div => div.classList.remove('show'));
    }

    // 点击关闭按钮
    modalClose.addEventListener('click', closeModal);

    // 点击模态框外部关闭
    changePasswordModal.addEventListener('click', (e) => {
        if (e.target === changePasswordModal) {
            closeModal();
        }
    });

    // 密码验证函数
    function validatePassword(password) {
        const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
        return regex.test(password);
    }

    // 实时密码验证
    inputs[1].addEventListener('input', () => {
        const isValid = validatePassword(inputs[1].value);
        inputs[1].classList.toggle('error', !isValid);
        errorDivs[0].classList.toggle('show', !isValid);
    });

    inputs[2].addEventListener('input', () => {
        const isMatch = inputs[1].value === inputs[2].value;
        inputs[2].classList.toggle('error', !isMatch);
        errorDivs[1].classList.toggle('show', !isMatch);
    });

    // 表单提交处理
    passwordForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const currentPassword = inputs[0].value;
        const newPassword = inputs[1].value;
        const confirmPassword = inputs[2].value;

        // 验证当前密码
        if (!currentPassword) {
            inputs[0].classList.add('error');
            return;
        }

        // 验证新密码
        if (!validatePassword(newPassword)) {
            inputs[1].classList.add('error');
            errorDivs[0].classList.add('show');
            return;
        }

        // 验证确认密码
        if (newPassword !== confirmPassword) {
            inputs[2].classList.add('error');
            errorDivs[1].classList.add('show');
            return;
        }

        // TODO: 发送到服务器验证和更新密码
        console.log('密码更新请求:', {
            currentPassword,
            newPassword
        });

        // 模拟成功响应
        alert('密码修改成功！');
        closeModal();
    });

    // 添加键盘事件监听
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && changePasswordModal.classList.contains('show')) {
            closeModal();
        }
    });
</script>

</html>